<!DOCTYPE html>
<html lang="en">
{{include 'admin/public/header.html'}}

<body>
  {{include 'admin/public/nav_top.html'}}
  <div id="loading-shelter" style="display: none;">
    <div class="la-ball-climbing-dot la-2x">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="main-container" id="main-container">
    <script type="text/javascript">
      try {
        ace.settings.check('main-container', 'fixed')
      } catch (e) {}
    </script>

    <div class="main-container-inner">
      <a class="menu-toggler" id="menu-toggler" href="#">
        <span class="menu-text"></span>
      </a>

      {{include 'admin/public/nav_left.html'}}

      <div class="main-content">
        <div class="breadcrumbs" id="breadcrumbs">
          <script type="text/javascript">
            try {
              ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {}
          </script>

          <ul class="breadcrumb">
            <li>
              <i class="iconfont">&#xe616;</i>
              <a href="#">首页</a>
            </li>
            <li class="active">控制台</li>
          </ul><!-- .breadcrumb -->

          <div class="nav-search" id="nav-search">
            <form class="form-search">
              <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                  autocomplete="off" />
                <i class="icon-search nav-search-icon"></i>
              </span>
            </form>
          </div><!-- #nav-search -->
        </div>

        <div class="page-content">

          <div class="page-header">
            <h1>
              列表
            </h1>
          </div><!-- /.page-header -->



          <!--表格-->

          <div class="table-responsive">
            <table id="sample-table-1" class="table table-striped table-bordered table-hover center">
              <thead>
                <tr>
                  <th class="center">
                    <label>
                      <input type="checkbox" class="ace">
                      <span class="lbl"></span>
                    </label>
                  </th>
                  <th>#</th>
                  <th class="center">标题</th>
                  <th class="center">作者</th>
                  <th class="center">分类名称</th>
                  <th class="center">
                    <i class="icon-time bigger-110 hidden-480"></i>
                    发布时间
                  </th>
                  <th class="center">热门</th>
                  <th class="center">关键词</th>
                  <th class="center">描述</th>
                  <th class="center">推荐</th>
                  <th class="center">状态</th>
                  <th width="100px;" class="center">操作</th>
                </tr>
              </thead>

              <tbody>
                {{each list}}
                <tr class="article-tr">
                  <td class="center">
                    <label>
                      <input type="checkbox" class="ace">
                      <span class="lbl"></span>
                    </label>
                  </td>
                  <td class="hidden-480">{{$index + 1}}</td>
                  <td class="hidden-480">{{$value.title}}</td>
                  <td class="hidden-480">{{$value.author}}</td>
                  <td class="hidden-480">{{$value.catename}}</td>
                  <td>{{$value.add_time | dateFormat}}</td>
                  <td class="hidden-480">
                    {{if $value.is_hot==1}}
                    <button id="status-button"
                      onclick="app.statusToggle($(this), 'article', 'is_hot', '{{@$value._id}}')"
                      class="btn btn-xs btn-success">
                      <i class="iconfont bigger-120 success">&#xe60a;</i>
                    </button>
                    {{else}}
                    <button id="status-button"
                      onclick="app.statusToggle($(this), 'article', 'is_hot', '{{@$value._id}}')"
                      class="btn btn-xs btn-danger">
                      <i class="iconfont bigger-120 success">&#xe644;</i>
                    </button>
                    {{/if}}
                  </td>
                  <td class="hidden-480">{{$value.keywords}}</td>
                  <td class="hidden-480">{{$value.description}}</td>
                  <td class="hidden-480">
                    {{if $value.is_best==1}}
                    <button id="status-button"
                      onclick="app.statusToggle($(this), 'article', 'is_best', '{{@$value._id}}')"
                      class="btn btn-xs btn-success">
                      <i class="iconfont bigger-120 success">&#xe60a;</i>
                    </button>
                    {{else}}
                    <button id="status-button"
                      onclick="app.statusToggle($(this), 'article', 'is_best', '{{@$value._id}}')"
                      class="btn btn-xs btn-danger">
                      <i class="iconfont bigger-120 success">&#xe644;</i>
                    </button>
                    {{/if}}
                  </td>
                  <td class="hidden-480">
                    {{if $value.status==1}}
                    <button id="status-button"
                      onclick="app.statusToggle($(this), 'article', 'status', '{{@$value._id}}')"
                      class="btn btn-xs btn-success">
                      <i class="iconfont bigger-120 success">&#xe60a;</i>
                    </button>
                    {{else}}
                    <button id="status-button"
                      onclick="app.statusToggle($(this), 'article', 'status', '{{@$value._id}}')"
                      class="btn btn-xs btn-danger">
                      <i class="iconfont bigger-120 success">&#xe644;</i>
                    </button>
                    {{/if}}
                  </td>
                  <td>
                    <div class="visible-md visible-lg hidden-sm hidden-xs btn-group center">
                      <a href="{{__HOST__}}/admin/article/edit?id={{@$value._id}}">
                        <button class="btn btn-xs btn-info" data-toggle="tooltip" data-placement="top">
                          <i class="iconfont bigger-120">&#xe61b;</i>
                        </button>
                      </a>
                      &nbsp;
                    <a href="javascript:;" class="delate-button" onclick="getId('{{@$value._id}}')">
                        <button class="btn btn-xs btn-danger" data-toggle="tooltip" data-placement="top">
                          <i class="iconfont bigger-120">&#xe600;</i>
                        </button>
                      </a>
                    </div>
                  </td>
                </tr>
                {{/each}}
              </tbody>
            </table>
            <div id="page" class="pagination"></div>
          </div>

        </div>
      </div><!-- /.main-content -->

    </div><!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
      <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
  </div><!-- /.main-container -->


  {{include 'admin/public/footer.html'}}
  <script src="{{__HOST__}}/admin/jqPaginator.js"></script>
  <script>
    $(function(){
      // 获取当前页面上的url地址和url参数page
      // window.href = window.location.href;
      window.curPage = app.getUrlParams('page')
      $('#page').jqPaginator({
        totalPages: {{totlePages}},
        visiblePages: 8,
        currentPage: {{page}},
        onPageChange: function (num, type) {
          console.log(num);
          if(type=='change'){
            location.href="{{__HOST__}}/admin/article?page="+num;
          }
        }
      });
      $(document).ajaxStart(function(){
        $("#loading-shelter").fadeIn()
        $(".table-responsive").fadeOut()
      }).ajaxStop(function(){
        $("#loading-shelter").fadeOut()
        $(".table-responsive").fadeIn()
      })
    })
    // 文档：http://www.htmleaf.com/jQuery/jquery-tools/201711284851.html

    // 将id值传进去,删除该数据
    function getId(id){
      console.log(id)
      app.handleDelate('article', id);
      
      if(!$(".article-tr").length){
        // 如果列表没有数据就跳转的到前一页
        // 有bug 未解决
        curPage-=1;
        let lastPage = `${location.host}${location.pathname}?page=${curPage}`
        window.location.href = lastPage;
      }else{
        location.reload()
        
      }
      console.log($(".article-tr").length, '个数')
    }
  </script>
</body>
</html>